<template>
  <div class="cart">
    <!-- {{$store.state.cart}} -->
    <div>
      <div class="cart-head">
        <van-nav-bar
          :title="title"
          left-text="返回"
          right-text="按钮"
          left-arrow
          @click-left="onClickLeft"
          @click-right="onClickRight"
        />

      </div>
      <div class="cart-p1">
        <p class="p1">
          <span>100%正品保证</span>
          <span>所有商品精挑细选</span>
          <span>售后无忧</span>
        </p>
      </div>
      <div class="p3">
        <div class="p2">
          <p>购物数量：<span class="num">{{num}}</span> <span
              style="float:right"
              @click="getflag"
            >{{flag?"管理":"取消"}}</span></p>
        </div>
      </div>
    </div>

    <div v-if="shopinglist.length==0">

      <van-empty description="描述文字" />

      <!-- 分割线 -->
      <van-divider>热门推荐</van-divider>
      <recommend></recommend>
    </div>

    <div
      v-else
      v-for="item in cartlist"
      :key="item.id"
    >
      <div>
        <van-switch v-model="item.attrStatus" />
      </div>
      <van-card
        :price="item.price"
        :title="item.storeName"
        :thumb="item.image"
      >

        <template #num>
          <p>

            <van-stepper
              v-model="item.cartNum"
              theme="round"
              button-size="22"
              disable-input
              @change="add({uid:item.id,number:item.cartNum})"
            />
          </p>
        </template>
      </van-card>

      <div>
        <van-submit-bar
          :price="o*100"
          button-text="提交订单"
          @submit="onSubmit"
        >
          <template #button>
            <div v-if="flag">
              <van-button
                round
                type="info"
              >提交订单</van-button>
            </div>
            <div v-else>
              <van-button
                round
                type="info"
                @click="delet()"
              >删除</van-button>
            </div>
          </template>
          <van-checkbox
            v-model="Alc"
            @click="All()"
          >全选</van-checkbox>

        </van-submit-bar>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import recommend from "../../components/recommend/index.vue";
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      title: this.$route.meta.title || "购物车",
      checked: null,
      // 商品列表
      shopinglist: [],
      // 获取token
      token: localStorage.token,
      // 全选
      allchecked: false,
      flag: true,
    };
  },
  methods: {
    onSubmit() {},
    onClickLeft() {
      // Toast("返回");
      this.$router.go(-1);
    },
    onClickRight() {
      Toast("按钮");
    },
    // 商品加减 有问题 已解决
    async add({ uid, number }) {
      let data = {
        authoriZation: this.token,
        id: uid,
        number,
      };
      const res = await this.$http.cartnum(data);
    },

    // 获取商品列表
    async getsplist() {
      const res = await this.$http.getshopinglist({
        authoriZation: this.token,
      });
      console.log(res);
      this.shopinglist = res.data.data.list;
      localStorage.setItem("cart", JSON.stringify(this.shopinglist));
    },
    // 全选
    All() {
      this.$store.commit("cart/clickallcheck");
    },
    // 底部栏全选状态
    cheall() {
      const res = this.shopinglist.every((item) => {
        item.attrStatus;
      });

      if (res) {
        this.allchecked = res;
      }
    },
    getflag() {
      this.flag = !this.flag;
      console.log(111);
    },
    // 删除选中
    async delet() {
      let list = Array.from(this.$store.state.cart.cart);
      let arr = [];
      list.forEach((item) => {
        if (item.attrStatus) {
          arr.push(item.id);
        }
      });
      const res = await this.$http.cartdelet({
        authoriZation: this.token,
        arr: arr,
      });
      console.log(res);
      this.getsplist();
      this.$router.go(0);
    },
  },
  created() {
    this.getsplist();
    this.cheall();
  },
  computed: {
    ...mapState({
      cartlist: (state) => state.cart.cart,
    }),

    ...mapGetters({
      num: "cart/getAllcount", //商品总数
      o: "cart/getAllprice", //商品金额
      Alc: "cart/getCompleted", //全选
    }),
  },
  watch: {
    $route(newVal) {
      // 组件名称显示到头部
      this.title = newVal.meta.title;
    },
  },
  components: {
    recommend,
  },
};
</script>
<style lang="scss">
.cart {
  .cart-head {
    // opacity: 0.7;
    width: 100%;
    .van-nav-bar {
      background: #e93323;
      color: #fff;
    }
  }
  .cart-p1 {
    height: 50px;
    line-height: 50px;
    background: #e93323;
    .p1 {
      margin: 0px;
      padding: 0px;
      span {
        // margin-left: 10px;
        margin: 0px 25px;
        font-size: 12px;
        color: #fff;
      }
    }
  }

  .p2 {
    padding: 0 50px;
    width: 50%;
    height: 50px;
    margin: 0px auto;
    line-height: 50px;
    border: 1px solid red;
    background: #fff;
    border-radius: 25px 25px 0px 0px;
    p {
      text-align: left;
      span {
        text-align: center;
      }
    }
  }
  .p3 {
    background: #e93323;
  }
  .van-nav-bar__text {
    color: #fff;
  }
  .van-nav-bar__title {
    color: #fff;
  }
  .van-switch {
    float: left;
  }
  .van-switch {
    float: left;
    /* position: absolute; */
    z-index: 9;
    margin-top: 8%;
  }
  .van-card{
    border-radius: 15px;
  }
}
</style>